<template>
  <v-scale-screen :width="win.screen.width" :height="win.screen.height" fullScreen :delay="500"
    style="margin:0;padding:0;position:relative; ">
    <!-- <video src="../../../static/videoBack6.mp4" autoplay loop controls="no" ref="videoBack"
			style="width:100%;height:100%;" class="videoBack"></video> -->
    <div class="page" id="page">
      <!-- 1.顶部的标题 -->
      <div class="twelve twelve_content"></div>
      <div class="titleBar titleBar1 every_content">
        <span style="float:left; font-size: .5rem;">{{ nowtime }}</span>
        <!-- <span class="titleName">{{ titleName }}</span> -->
        <span class="titleName">智慧水务监控系统</span>
        <div>
          <div class="changeWin exit" v-if="screenThree" @click="fullScreenThree">
            <!-- <i class="iconfont icon-quxiaoquanping" title="取消全屏"></i> -->
            <img src="../../static/icon4.png" alt="" title="取消全屏" />
          </div>
          <div class="changeWin exit" v-if="!screenThree" @click="fullScreenThree">
            <img src="../../static/icon5.png" alt="" style="color: red;" title="全屏显示 " />
          </div>
          <div class="exit" @click="goExit">
            <i class="el-icon-s-fold"></i>控制台
          </div>
          <div class="exit" @click="goDataLarge" style="margin-right: .4rem;">
            <i class="el-icon-s-platform"></i> 监控中心
          </div>
          <div class="exit" @click="changeMining" style="margin-right: .4rem;">
            <i class="el-icon-caret-bottom"></i> 切换项目
          </div>
        </div>
      </div>

      <div class="optionListBox" v-show="optionList">
        <div class="oneView over" :class="optionId == item.value ? 'active_2' : ''" v-for="item in options"
          :key="item.value" @click="changeOption(item, $event)">
          <span>{{ item.label }}</span>
        </div>
        <!-- {{ options }} -->
      </div>

      <div class="two every_content z_99">
        <div class="every_content_title">
          <div></div>
          用水详情 (吨)
        </div>
        <div class="water_info">
          <div>
            <div style="color:#f4626a ;">25624.4</div>
            <div>本年用水</div>
          </div>
          <div>
            <div style="color:#16d2fa ;">5865.3</div>
            <div>本季用水</div>
          </div>
          <div>
            <div style="color:#f6d06f ;">2045.2</div>
            <div>本月用水</div>
          </div>
          <div>
            <div style="color:#4ef672 ;">42.8</div>
            <div>今日用水</div>
          </div>
        </div>
      </div>

      <!-- 5.左侧上面的第二个 -->
      <div class="three every_content z_99">
        <div class="left_bottom">
          <!-- 上面 -->
          <div class="left_bottom_info">
            <div class="every_content_title1">
              <div></div>
              设备变量
            </div>
            <div class="device_data">
              <div>
                <div class="d_info">
                  <div style="color: #16d2fa;">120</div>
                  <div style="color: #16d2fa;">设备总量</div>
                </div>
                <div class="d_info">
                  <div style="color:#4ef672;">110</div>
                  <div style="color:#4ef672;">在线正常</div>
                </div>
              </div>
              <div>
                <div class="d_info d_bottom_info">
                  <div style="color: #f4626a;">5</div>
                  <div style="color: #f4626a;">在线报警</div>
                </div>
                <div class="d_info d_bottom_info">
                  <div style="color: #7a9fbd;">5</div>
                  <div style="color: #7a9fbd;">离线设备</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 下面 -->
          <div class="left_bottom_info">
            <div class="every_content_title1">
              <div></div>
              进度图
            </div>
            <div class="schedule_data">
              <!-- a厂区 -->
              <div class="plan_info">
                <div class="plan_name">a</div>
                <div class="plan_data">
                  <div class="prog">
                    <div class="prog_title">水详情</div>
                    <div class="prog_content">
                      <el-progress :text-inside="false" :show-text="false" :stroke-width="20"
                        :class="['prog_picture', prog_one1 ? 'back' : 'back0']" :percentage="prog_one"></el-progress>
                    </div>
                    <div class="schedule_value">{{ prog_one }}%</div>
                  </div>
                  <div class="prog">
                    <div class="prog_title">电计划</div>
                    <div class="prog_content">
                      <el-progress :text-inside="true" :show-text="false" :stroke-width="20"
                        :class="['prog_picture', prog_two1 ? 'back' : 'back0']" :percentage="prog_two"
                        status="success"></el-progress>
                    </div>
                    <div class="schedule_value">{{ prog_two }}%</div>
                  </div>
                  <div class="prog">
                    <div class="prog_title">气计划</div>
                    <div class="prog_content">
                      <el-progress :text-inside="true" :show-text="false" :stroke-width="20" :class="[
                        'prog_picture',
                        prog_three1 ? 'back' : 'back0'
                      ]" :percentage="prog_three" status="warning"></el-progress>
                    </div>
                    <div class="schedule_value">{{ prog_three }}%</div>
                  </div>
                </div>
              </div>
              <!-- b厂区 -->
              <div class="plan_info">
                <div class="plan_name">b</div>
                <div class="plan_data">
                  <div class="prog">
                    <div class="prog_title">水详情</div>
                    <div class="prog_content">
                      <el-progress :text-inside="false" :show-text="false" :stroke-width="20" :class="[
                        'prog_picture',
                        prog_one1_b ? 'back' : 'back0'
                      ]" :percentage="prog_one_b"></el-progress>
                    </div>
                    <div class="schedule_value">{{ prog_one_b }}%</div>
                  </div>
                  <div class="prog">
                    <div class="prog_title">电计划</div>
                    <div class="prog_content">
                      <el-progress :text-inside="true" :show-text="false" :stroke-width="20" :class="[
                        'prog_picture',
                        prog_two1_b ? 'back' : 'back0'
                      ]" :percentage="prog_two_b" status="success"></el-progress>
                    </div>
                    <div class="schedule_value">{{ prog_two_b }}%</div>
                  </div>
                  <div class="prog">
                    <div class="prog_title">气计划</div>
                    <div class="prog_content">
                      <el-progress :text-inside="true" :show-text="false" :stroke-width="20" :class="[
                        'prog_picture',
                        prog_three1_b ? 'back' : 'back0'
                      ]" :percentage="prog_three_b" status="warning"></el-progress>
                    </div>
                    <div class="schedule_value">{{ prog_three_b }}%</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 设备统计 -->
      </div>
      <!-- 6.左侧上面的第三个 -->
      <!-- <div class="four every_content z_99">
                <div class="every_content_title">
                    <div></div>333
                </div>


            </div> -->
      <!-- 7.右上角的天气 -->
      <div class="seven every_content z_99">
        <div class="every_content_title">
          <div></div>
          用气详情 (m³)
        </div>
        <div class="electric_info">
          <div>
            <div style="color:#f4626a;">3648.1</div>
            <div>本年用气</div>
          </div>
          <div>
            <div style="color:#16d2fa ;">1834.4</div>
            <div>本季用气</div>
          </div>
          <div>
            <div style="color:#f6d06f ;">506.7</div>
            <div>本月用气</div>
          </div>
          <div>
            <div style="color:#4ef672 ;">24.2</div>
            <div>今日用气</div>
          </div>
        </div>
      </div>
      <!-- 8.右边中间的部分 -->
      <div class="eight every_content z_99">
        <div class="every_content_title1">
          <div></div>
          实时数据
        </div>
        <div class="real_data">
          <div v-for="item in real_data" :key="item.value" class="real_info">
            <div>{{ item.value }}</div>
            <div>{{ item.label }}</div>
          </div>
        </div>
      </div>
      <!-- 9.右边下面的部分 -->
      <div class="nine every_content z_99">
        <div class="right_bottom">
          <!-- 右下角第一个 -->
          <div class="right_bottom_top">
            <div class="every_content_title1">
              <div></div>
              分区使用情况
              <div style="margin-left: auto; cursor: pointer;">
                <span @click="changePartition(1)" :class="[{ mActive: partition === 1 }]">水</span>
                <span @click="changePartition(2)" :class="[{ mActive: partition === 2 }]"
                  style="margin-left: .3rem;">电</span>
                <span @click="changePartition(3)" :class="[{ mActive: partition === 3 }]"
                  style="margin-left: .3rem;">气</span>
              </div>
            </div>
            <div class="partitionData" id="partitionData"></div>
          </div>
          <!-- 右下角第二个 -->
          <div class="right_bottom_bottom" id="statistics"></div>
        </div>
      </div>
      <!-- 10.中间下面实时数据显示 -->
      <div class="ten every_content z_99">
        <div class="every_content_title1">
          <div></div>
          瞬时能耗情况
          <div style="margin-left: auto; cursor: pointer;">
            <span @click="changeMoment(1)" :class="[{ mActive: moment === 1 }]">A厂区</span>
            <span @click="changeMoment(2)" :class="[{ mActive: moment === 2 }]" style="margin-left: .3rem;">B厂区</span>
          </div>
        </div>
        <!-- 下面的图表 -->
        <div class="momentData" id="momentData"></div>
      </div>
      <!-- 11.地图中间显示的搜索筛选功能  搜索设备的 -->
      <div class="eleven every_content z_99">
        <div class="every_content_title">
          <div></div>
          用电详情 (KW/H)
        </div>
        <div class="natural_info">
          <div>
            <div style="color:#f4626a ;">80249.3</div>
            <div>本年用电</div>
          </div>
          <div>
            <div style="color:#16d2fa ;">19875.5</div>
            <div>本季用电</div>
          </div>
          <div>
            <div style="color:#f6d06f ;">6558.2</div>
            <div>本月用电</div>
          </div>
          <div>
            <div style="color:#4ef672 ;">800.4</div>
            <div>今日用电</div>
          </div>
        </div>
      </div>
    </div>
  </v-scale-screen>
</template>

<script>
export default {
  name: "largeScreenNew",
  data() {
    return {
      win: window,
      Socket: null,
      baseurl: this.$baseurl,
      timer: null,
      fullScreen: false,
      screenThree: false,
      titleName: "XXX能耗监测系统",
      // 右上角的文字
      right_top: "关闭全屏",

      nowtime: "",
      nowTimer: null,
      fromRouter: {
        name: "",
        path: ""
      },
      // 矿区的所有数据
      options: [
        {
          value: 1,
          label: "项目1"
        },
        {
          value: 2,
          label: "项目2"
        },
        {
          value: 3,
          label: "项目3"
        },
        {
          value: 4,
          label: "项目4"
        },
        {
          value: 5,
          label: "项目5"
        },
        {
          value: 6,
          label: "项目6"
        },
        {
          value: 7,
          label: "项目7"
        }
      ],
      // 控制切换矿区的显示
      optionList: false,
      // 当前园区的id
      optionId: localStorage.getItem("park_id"),
      optionName: "",
      refresh: null,

      // 1.园区的信息
      park_info: {
        park_describe: "",
        park_image: ""
      },
      // 中间瞬时显示的哪个
      moment: 1,
      yData: [
        [51, 52, 55, 60, 66, 60, 55, 50, 48, 47, 50],
        [45, 43, 44, 48, 50, 46, 41, 48, 55, 52, 55],
        [33, 32, 35, 34, 34, 33, 36, 31, 36, 33, 33],
        [24, 22, 17, 24, 22, 19, 27, 20, 25, 22, 23]
      ],
      // 进度的数据
      prog_one: 60,
      prog_two: 50,
      prog_three: 40,

      prog_one_b: 70,
      prog_two_b: 30,
      prog_three_b: 50,
      // 控制两个进度的背景颜色
      prog_one1: false,
      prog_two1: false,
      prog_three1: false,

      prog_one1_b: false,
      prog_two1_b: false,
      prog_three1_b: false,
      // 分区使用切换显示的哪个
      partition: 1,
      classification_water_type: [
        { value: 20, name: "A区" },
        { value: 30, name: "B区" },
        { value: 40, name: "C区" },
        { value: 10, name: "D区" }
      ],
      // 中间下方的数据集
      real_data: [
        { value: 345, label: "测试名称1" },
        { value: 564, label: "测试名称2" },
        { value: 234, label: "测试名称3" },
        { value: 784, label: "测试名称4" },
        { value: 742, label: "测试名称5" },
        { value: 266, label: "测试名称6" },
        { value: 521, label: "测试名称7" },
        { value: 678, label: "测试名称8" },
        { value: 784, label: "测试名称9" },
        { value: 246, label: "测试名称10" },
        { value: 852, label: "测试名称11" },
        { value: 120, label: "测试名称12" }
      ]
    };
  },
  components: {},

  beforeRouteEnter(to, from, next) {
    next(vm => {
      console.log("from", vm.fromRouter);
      vm.fromRouter.name = from.name;
      vm.fromRouter.path = from.path;
    });
  },

  created() {
    var that = this;
    // 拿到园区下拉下拉的信息
    // that.getParkName();
  },

  mounted() {
    var that = this;

    setTimeout(() => {
      // 展示瞬时
      that.lookMoment();
      // 展示水电气
      that.lookPartition();
      // 显示右下角的图
      that.lookStatistics();
    }, 500);

    setTimeout(() => { }, 1500);
    this.nowTimer = setInterval(function () {
      if (window.screen.width > 1440) {
        that.nowtime = that.getNowTime(true);
      } else {
        that.nowtime = that.getNowTime(false);
      }
    }, 1000);
    this.$nextTick(function () {
      that.letFullScreen();
    });
  },
  methods: {
    letFullScreen() {
      var that = this;
      //this.screenThree =document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
      //不能用page，将引起下拉框无法显示
      //var content = this.$refs.page;
      var content = document.documentElement;
      if (!that.screenThree) {
        //进入全屏,多重短路表达式
        (content.requestFullscreen && content.requestFullscreen()) ||
          (content.mozRequestFullScreen && content.mozRequestFullScreen()) ||
          (content.webkitRequestFullscreen &&
            content.webkitRequestFullscreen()) ||
          (content.msRequestFullscreen && content.msRequestFullscreen());
        that.screenThree = true;
      } else {
        //CancelFullScreen?document.mozCancelFullScreen():
        document.exitFullscreen
          ? document.exitFullscreen()
          : document.mozCancelFullScreen
            ? document.mozCancelFullScreen()
            : document.webkitExitFullscreen
              ? document.webkitExitFullscreen()
              : "";
        that.screenThree = false;
      }
    },
    // 大小屏切换
    fullScreenThree() {
      var that = this;
      //this.screenThree =document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
      //不能用page，将引起下拉框无法显示
      //var content = this.$refs.page;
      var content = document.documentElement;
      if (!this.screenThree) {
        //进入全屏,多重短路表达式
        (content.requestFullscreen && content.requestFullscreen()) ||
          (content.mozRequestFullScreen && content.mozRequestFullScreen()) ||
          (content.webkitRequestFullscreen &&
            content.webkitRequestFullscreen()) ||
          (content.msRequestFullscreen && content.msRequestFullscreen());
        this.screenThree = true;
      } else {
        //CancelFullScreen?document.mozCancelFullScreen():
        document.exitFullscreen
          ? document.exitFullscreen()
          : document.mozCancelFullScreen
            ? document.mozCancelFullScreen()
            : document.mozkitExitFullscreen
              ? document.webkitExitFullscreen()
              : "";
        this.screenThree = false;
      }
    },
    //数据大屏
    goDataLarge() {
      this.$router.push({
        path: "/mainData",
        name: "mainData",
        component: "mainData"
      });
    },
    // 拿下拉内容
    getParkName() {
      var that = this;
      that.options = [];
      getParkName()
        .then(data => {
          that.options = data;
          that.optionId = localStorage.getItem(park_id) || data[0].value;
          // localStorage.setItem('park_id', data[0].value)
          that.optionName = data[0].name;

          // for (let i = 0, len = this.options.length; i < len; i++) {
          //     if (this.hasDefault) {
          //         break;
          //     }
          //     this.getFirstDefault(this.options[i]);
          // }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 默认设置时间
    getNowFormatDate() {
      //获取当前年月日
      var date = new Date();
      var seperator1 = "-";
      // var seperator2 = ":";
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var currentdate = date.getFullYear() + seperator1 + month;

      return currentdate;
    },
    // 右上角关闭
    goExit() {
      var that = this;
      console.log("this.fromRouter.name", this.fromRouter);

      clearInterval(that.timer);
      if (this.Socket) {
        this.Socket.close();
        this.Socket = null;
      }
      if (
        this.fromRouter.name == "mainData" ||
        this.fromRouter.name == "showData" ||
        this.fromRouter.name == "largeScreen" ||
        this.fromRouter.name != "Login"
      ) {
        document.exitFullscreen
          ? document.exitFullscreen()
          : document.mozCancelFullScreen
            ? document.mozCancelFullScreen()
            : document.webkitExitFullscreen
              ? document.webkitExitFullscreen()
              : "";
        this.$router.push({
          name: "device",
          path: "mainMenu/device"
        });
        localStorage.setItem("indexPath", "7-1");
      } else {
        document.exitFullscreen
          ? document.exitFullscreen()
          : document.mozCancelFullScreen
            ? document.mozCancelFullScreen()
            : document.webkitExitFullscreen
              ? document.webkitExitFullscreen()
              : "";
        this.$router.push({
          name: that.fromRouter.name,
          path: that.fromRouter.path
        });
        // localStorage.setItem("indexPath", "6");
      }
    },
    // 点击切换矿区
    changeMining() {
      var that = this;
      if (this.timeoutId) {
        clearTimeout(this.timeoutId);
      }
      that.optionList = !this.optionList;

      that.timeoutId = setTimeout(function () {
        // that.optionList = false;
      }, 5000);
    },
    // 选择矿区
    changeOption(item, e) {
      setTimeout(function () {
        that.optionList = false;
      }, 100);
      var that = this;
      this.optionId = item.value;
      localStorage.setItem("park_id", item.value);
      this.optionName = item.name;
      // 切换矿区后的操作
      setTimeout(() => {
        // 0.拿设备类型数量
        that.deviceCount();
        // 查园区下面的设备
        that.getDevice();
        // 1园区简介
        that.parkInfo();
        // 2.种植信息
        that.getPlanInfo();
      }, 200);
      setTimeout(() => { }, 1700);
      // 切换之后的一系列操作
      // await this.getEquip(this.optionId);
      //this.lineForm.device = [];
      // if (this.topTab != "data") {
      //     setTimeout(function () {
      //         that.chooseTab(that.topTab);
      //     }, 1000);
      // }
    },
    // 切换瞬时
    changeMoment(c) {
      var that = this;
      this.moment = c;
      if (c == 1) {
        this.yData = [
          [51, 52, 55, 60, 66, 60, 55, 50, 48, 47, 50],
          [45, 43, 44, 48, 50, 46, 41, 48, 55, 52, 55],
          [33, 32, 35, 34, 34, 33, 36, 31, 36, 33, 33],
          [24, 22, 17, 24, 22, 19, 27, 20, 25, 22, 23]
        ];
        that.lookMoment();
      } else if (c == 2) {
        this.yData = [
          [45, 41, 55, 43, 44, 48, 55, 52, 48, 50, 46],
          [33, 32, 33, 36, 31, 35, 34, 34, 36, 33, 33],
          [24, 22, 27, 20, 25, 22, 17, 24, 22, 19, 23],
          [51, 52, 55, 60, 55, 50, 48, 47, 60, 66, 50]
        ];
        that.lookMoment();
      }
    },
    // 切换分区使用
    changePartition(p) {
      var that = this;
      that.partition = p;
      if (p == 1) {
        that.classification_water_type = [
          { value: 20, name: "A区" },
          { value: 30, name: "B区" },
          { value: 40, name: "C区" },
          { value: 10, name: "D区" }
        ];
      } else if (p == 2) {
        that.classification_water_type = [
          { value: 70, name: "A区" },
          { value: 20, name: "B区" },
          { value: 20, name: "C区" },
          { value: 50, name: "D区" }
        ];
      } else if (p == 3) {
        that.classification_water_type = [
          { value: 10, name: "A区" },
          { value: 50, name: "B区" },
          { value: 30, name: "C区" },
          { value: 60, name: "D区" }
        ];
      }
      this.lookPartition(p);
    },
    // 渲染瞬时
    // 渲染分类的瞬时流量
    lookMoment() {
      var chartDom = document.getElementById("momentData");
      // option && myChart.setOption('');
      // console.log('11111111渲染分类的瞬时流量');

      //    moment_flow
      var charts = {
        unit: "单位 : (T/H)",
        names: ["用水", "用电", "用气", "其他"],
        // lineX: this.moment.time,
        // value: this.moment.data
        lineX: [
          " 00:00",
          " 00:15",
          " 00:30",
          " 00:45",
          " 01:00",
          " 01:15",
          " 01:30",
          " 01:45",
          " 02:00",
          " 03:15",
          " 03:30"
        ],
        value: this.yData
      };
      var color = [
        "rgba(118, 239, 146",
        "rgba(242, 219, 160",
        "rgba(159, 80, 102",
        "rgba(35, 95, 212"
      ];
      var lineY = [];

      for (var i = 0; i < charts.names.length; i++) {
        var x = i;
        if (x > color.length - 1) {
          x = color.length - 1;
        }
        var data = {
          name: charts.names[i],
          type: "line",
          //  stack: '总量',
          color: color[x] + ")",
          smooth: true,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: color[x] + ", 0)"
                  },
                  {
                    offset: 0.8,
                    color: color[x] + ", 0)"
                  }
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
              shadowBlur: 10
            }
          },
          symbol: "circle",
          symbolSize: 5,
          data: charts.value[x],
          // 添加 lineStyle 属性
          lineStyle: {
            width: 2.2 // 设置线的粗细
          }
        };
        lineY.push(data);
      }
      // console.log('循环结束', lineY)
      var option = {
        title: {
          text: "瞬 时 消 耗 状 态",
          textStyle: {
            color: "#fff"
          },
          left: "center",
          top: "4%"
        },
        textStyle: {
          color: "#efd779" // 设置单位颜色
          // fontSize: 18
        },
        backgroundColor: "rgb(183, 183, 183,0)",
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: charts.names,
          icon: "rect",
          textStyle: {
            fontSize: 10,
            fontWeight: "200",
            color: "#fff"
          },
          //right: 'center',
          type: "scroll",
          // 设置为 single
          align: "left",
          itemWidth: 15,
          itemHeight: 10,
          right: 10,
          top: 10
        },
        grid: {
          top: "18%",
          left: "4%",
          right: "4%",
          bottom: "6%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: charts.lineX,
          splitLine: {
            lineStyle: {
              color: "rgb(183, 183, 183)"
            }
          },
          axisLabel: {
            textStyle: {
              color: "#168ceb",
              fontSize: 14,
              fontWeight: "600"
            },
            formatter: function (params) {
              return params.split(" ")[0] + "\n" + params.split(" ")[1];
            }
          }
        },
        yAxis: {
          name: charts.unit,
          type: "value",
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "rgb(22, 140, 235)"
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgb(183, 183, 183)"
              // type: 'dashed',
            }
          },
          axisLine: {
            lineStyle: {
              color: "rgba(183, 183, 183,0.3)"
            }
          }
        },
        series: lineY
      };
      var myChart = echarts.init(chartDom, null, {
        minwidth: 70,
        minheight: 100
      });
      option && myChart.setOption(option);
    },
    // 显示分类的饼图
    lookPartition(p) {
      var chartDom = document.getElementById("partitionData");
      var myChart = echarts.init(chartDom);

      // This example requires ECharts v5.5.0 or later
      var option = {
        tooltip: {
          trigger: "item",
          // formatter: "{a} <br/>{b} : {c} 个"
          formatter: function (params) {
            return (
              "累计用水量" +
              "<br/>" +
              '<span style="color: #ffe3b8;">' +
              params.name +
              "</span>" +
              " : " +
              '<span style="color: #00e391;">' +
              params.value +
              "万m³" +
              "</span>"
            ); // 设置字体颜色为红色
          }
        },

        grid: {
          left: "10%",
          right: "10%",
          top: "10%",
          bottom: "10%"
        },
        legend: {
          top: "center",
          left: "6%",
          orient: "vertical",
          itemGap: 20,
          textStyle: {
            color: "#fff"
          }
        },
        color: [
          "#248cc9",
          "#efd779",
          "#00e391",
          "#fab325",
          "#0190f8",
          "#00dde6",
          "#7f58e5",
          "#eb6f49"
        ],
        toolbox: {
          // show: true,
          // feature: {
          //     mark: { show: true },
          //     dataView: { show: true, readOnly: false },
          //     restore: { show: true },
          //     saveAsImage: { show: true }
          // }
        },
        series: [
          {
            name: "累计用水量",
            type: "pie",
            // radius: [40, 80],
            radius: ["20%", "70%"],
            center: ["56%", "50%"],
            roseType: "area", //area,radius环形占比
            itemStyle: {
              borderRadius: 38
            },
            //
            data: this.classification_water_type
          }
        ]
      };

      option && myChart.setOption(option);
    },
    // 显示右下角的那个图
    lookStatistics() {
      var chartDom = document.getElementById("statistics");
      var myChart = echarts.init(chartDom);

      // This example requires ECharts v5.5.0 or later
      var option = {
        title: {
          text: "近12小时用水统计",
          textStyle: {
            color: "#fff"
          },
          left: "center",
          top: "1%"
        },
        //   backgroundColor:"#0F285C",
        grid: {
          containLabel: true,
          top: 56,
          right: 15,
          bottom: 10,
          left: 15
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          },
          formatter: params => {
            console.log(params);
            const { name, data } = params[0];
            return `
            <span style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:12px;">${name}</span>
            <sapn style="font-size: 14px;font-family: Source Han Sans CN-Medium;font-weight: 500;color: #FFFFFF;margin-bottom:4px;">：${data} 吨</span>
         `;
          },
          extraCssText:
            "opacity: 0.8;background-color:#050F1B;padding:16px;box-shadow: 1px 6px 15px 1px rgba(0,0,0,0.13);border-radius: 4px;filter: blur(undefinedpx);border:none;"
        },
        xAxis: {
          // 类目轴
          type: "category",
          data: [
            "12点",
            "13点",
            "14点",
            "15点",
            "16点",
            "17点",
            "18点",
            "19点",
            "20点",
            "21点",
            "22点",
            "23点"
          ],
          axisTick: {
            show: false //隐藏X轴刻度
          },
          splitLine: {
            lineStyle: {
              color: "rgb(183, 183, 183)"
            }
          },

          axisLabel: {
            show: true,
            textStyle: {
              color: "#168ceb",
              fontSize: 14,
              fontFamily: "Source Han Sans CN-Regular"
            }
          }
        },
        yAxis: {
          type: "value",
          name: "单位/吨",
          // nameTextStyle: {
          //     color: 'rgba(183, 183, 183,0.3)',
          //     fontSize: 14,
          //     align: "left",
          //     verticalAlign: "center",
          // },
          axisLabel: {
            textStyle: {
              color: "rgb(22, 140, 235)",
              fontSize: 14
            }
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(223, 223, 223, 1)"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: "rgba(183, 183, 183,1)"
              // type: "dashed",
            }
          }
        },
        series: [
          {
            type: "bar",
            barWidth: "50%",
            showBackground: true,
            backgroundStyle: {
              color: "transparent"
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#0762ed" },
                { offset: 1, color: "#17d8e5" }
              ])
            },
            data: [132, 66, 76, 66, 54, 37, 90, 100, 136, 88, 54, 37]
          }
        ]
      };

      option && myChart.setOption(option);
    }
  },
  // 关闭页面
  beforeDestroy() {
    clearInterval(this.refresh);
  }
};
</script>

<style scoped>
@media all and (max-width: 1440px) {
  .titleName {
    font-size: 0.4rem !important;
  }

  .pie_title>span,
  .alarm_head>span {
    font-size: 0.16rem !important;
  }
}

.page {
  z-index: 9991;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  /* margin-top: 0.02rem; */
  /* border: 2px solid red; */
  box-sizing: border-box;
  font-size: 0.62rem;
  color: #eee;

  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(24, 1fr);
  grid-gap: 10px;
  padding: 0;
}

.page::after {
  content: "";
  /* background: url('../../../static/bg_01.png') no-repeat center center/cover; */
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

/* 整个选择框的样式 */
.optionListBox {
  min-width: 4rem;
  max-width: 6rem;
  font-size: 0.6rem;
  color: #eee;
  /* position: absolute; */
  top: 1.3rem;
  right: 5rem;
  height: auto;
  /* background-color: rgba(0, 0, 0, 0.3); */
  padding: 0.1rem;
  /* transition:all 500ms linear; */
  z-index: 100000000000 !important;
  min-height: 60px;
  position: fixed;
  /* top: 1.4rem; */
  /* background-color: #4c524be3; */
  background-color: #374f8d;
  border-radius: 0.1rem;
  border-radius: 0.3rem;
  transition: opacity 2.5s;
}

/* 未选中的通用样式 */
.oneView {
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  margin-top: 0.2rem;
  text-align: center;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 0.2rem;
  border: 2px;
  box-sizing: border-box;
  font-size: 0.42rem;
}

.oneView:hover {
  border: 2px solid #c4c7d1;
  box-sizing: border-box;
}

.oneView:first-child {
  margin-top: 0;
}

/* 当前选中的矿区 */
.active_2 {
  color: #fff !important;
  background-color: #5c81b2;
  /* border: 2px solid #bcc083; */
  box-sizing: border-box;
}

.exitIcon {
  /* display: inline-block;
    width: 0.2rem;
    height: 0.2rem;
    line-height: 0.2rem;
    text-align: center;
    vertical-align: middle;
    padding-top: 2px;
    margin-right: 0.1rem; */
  font-weight: 700;
}

@keyframes animate {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* .titleBar {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    position: relative;
    z-index: 999;
    color: #fff;
    padding: 0 0.2rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    margin-top: .2rem;
} */
/* text-align:center; */
/* background-image: url('../../../static/title_01.png'); */
/* border: 1px solid red; */

.titleName {
  display: inline-block;
  width: 50%;
  margin: 0 auto;
  position: absolute;
  left: 50%;
  /* top: .2rem; */
  z-index: 2;
  transform: translateX(-50%);
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04rem;
  text-shadow: 6px 6px 6px rgba(0, 0, 0, 1) !important;
  /* border: 1px solid red; */
}

.exit {
  width: 2.3rem;
  float: right;
  /* margin-top: 0.38rem; */
  text-align: center;
  padding: 0;
  height: 0.4rem;
  line-height: 0.4rem;
  font-size: 0.44rem;
  display: flex;
  align-items: center;
  /* justify-content: space-around; */
  font-weight: 600;
  /* font-family: 'Microsoft YaHei', sans-serif; */
  cursor: pointer;
  /* background-color: #0c285B; */
  color: #fff;
  /* border: 2px solid rgb(97 97 196); */
  border-radius: 6px;
  z-index: 9999;
}

.exit>i {
  font-size: 0.4rem !important;
  margin-right: 0.1rem;
  height: 0.4rem;
  line-height: 0.4rem;
}

.exit>img {
  width: 0.4rem;
  height: 0.4rem;
  /* margin-left: .1rem; */
}

.exit:hover {
  background-color: #0c285b;
  color: #fff;
  /* border: 2px solid rgb(97 97 196); */
  border-radius: 6px;
  z-index: 9999;
}

.exit:hover i {
  /* color: deepskyblue !important; */
}

.changeWin {
  width: 0.5rem;
  z-index: 999999 !important;
  color: red !important;
  font-size: 0.4rem !important;
}

.changeWin>img {
  width: 0.6rem;
  height: 0.6rem;
}

.changeWin:hover {
  color: #0c285b !important;
}

.exit>>>.el-icon-s-fold {
  font-size: 0.2rem;
}

.exit:hover {
  background-color: transparent;
  color: #5d7cc5;
}

.exit:hover i {
  /* color: deepskyblue !important; */
}

/* grid */
.content {
  width: 98.6%;
  height: 100%;
  margin: 0 auto;
  /* display: flex;
    align-items: center;
    justify-content: space-between; */
  /* margin-top: 0.02rem; */
  /* border: 2px solid red; */
  box-sizing: border-box;
  font-size: 0.32rem;
  color: #eee;

  display: grid;
  grid-template-columns: repeat(24, 1fr);
  grid-template-rows: repeat(24, 1fr);
  grid-gap: 10px;
}

/* .shadow {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
    box-shadow: inset 0 0 10px rgba(7, 41, 113, 0.9),
        inset 0 0 20px rgba(15, 60, 118, 0.9),
        inset 0 0 30px rgba(27, 54, 129, 0.9);
} */
.z_99 {
  z-index: 99999;
}

/* 左侧的 */
.two {
  grid-column: 1/9;
  grid-row: 3/7;
}

.three {
  grid-column: 1/8;
  grid-row: 7/25;
}

.four {
  grid-column: 1/8;
  grid-row: 17/24;
}

/* .five {
    grid-column: 1/7;
    grid-row: 18/25;
} */

.six {
  grid-column: 1/25;
  grid-row: 1/25;

  /*   如果有重叠，就使用 z-index */
}

/* 右侧的 */
.seven {
  grid-column: 17/25;
  grid-row: 3/7;
}

.eight {
  grid-column: 8/18;
  grid-row: 18/25;
  /* grid-column: 9/9;
    grid-row: 9/9; */
}

.nine {
  grid-column: 18/25;
  grid-row: 7/25;
}

.ten {
  grid-column: 8/18;
  grid-row: 7/18;
  /* border-radius: .1rem; */
  /* overflow: hidden; */
  /* border: 2px solid red; */
  /* background-color: #0e1a11; */
  /* background-color: rgba(12, 21, 25, .63); */
  /* opacity: .8; */
  /* background-color: transparent; */
}

.eleven {
  grid-column: 9/17;
  grid-row: 3/7;
  /* background-color: #ae2774; */
  z-index: 999;
}

.twelve {
  grid-column: 1/25;
  grid-row: 1/25;
  z-index: 999;
  background-color: #2d3a65;
  /* background-image: linear-gradient(to bottom,
            rgba(12, 21, 25, 1),
            rgba(12, 21, 25, .7),
            rgba(12, 21, 25, .6),
            rgba(12, 21, 25, .5),
            rgba(12, 21, 25, 0)); */
}

/* 标题 2 */
.titleBar1 {
  grid-column: 1/25;
  grid-row: 1/3;
  /* border: 1px solid #f80404; */
  position: relative;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.4rem;
}

.twelve_content {
  width: 100%;
  height: 100%;
  margin: auto 0;
  /* border: 1px solid rgb(25, 105, 175); */
  /* z-index: 99; */
  position: relative;
}

.every_content {
  width: 100%;
  height: 100%;
  margin: auto 0;
  /* border: 1px solid rgb(25, 105, 175); */
  /* border: 1px solid #dc58b0; */
  position: relative;
  /* background-color: #394c78; */
  background-color: #072362;
}

.water_info,
.electric_info,
.natural_info {
  width: 100%;
  height: calc(100% - 0.7rem);
  margin-top: 0.7rem;
  /* border: 1px solid #5bbd92; */
  display: flex;
  align-items: center;
}

.water_info>div,
.electric_info>div,
.natural_info>div {
  width: 25%;
  height: 80%;

  display: flex;
  flex-direction: column;
}

.water_info>div>div,
.electric_info>div>div,
.natural_info>div>div {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.water_info>div>div:nth-child(1),
.electric_info>div>div:nth-child(1),
.natural_info>div>div:nth-child(1) {
  font-size: 0.5rem;
}

.water_info>div>div:nth-child(2),
.electric_info>div>div:nth-child(2),
.natural_info>div>div:nth-child(2) {
  font-size: 0.42rem;
  font-weight: 700;
  color: #1999fd;
}

.every_content_title {
  position: absolute;
  top: 0;
  padding-left: 3%;
  width: auto;
  height: 0.5rem;
  line-height: 0.5rem;
  color: #54b3fb;
  /* border: 1px solid red; */
  font-size: 0.4rem;
  font-weight: bold;
  text-align: left;
  z-index: 99;
  /* border: 1px solid #11578d; */
  /* border: 1px solid #0c1519; */
  /* cursor: pointer; */
  user-select: none;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease-in-out;
  margin-top: 0.1rem;
}

.every_content_title>div:nth-child(1) {
  width: 0.08rem;
  height: 60%;
  background-color: #5bbd92;
  margin-right: 0.1rem;
  border-radius: 0.7rem;
}

.every_content_title:hover {
  transform: scale(1.15);
}

/* 第二种标题样式 */
.every_content_title1 {
  position: absolute;
  top: 0;
  padding: 0 2%;
  width: 96%;
  margin-left: 2%;
  height: 0.7rem;
  line-height: 0.5rem;
  color: #54b3fb;
  /* border: 1px solid red; */
  font-size: 0.4rem;
  font-weight: bold;
  text-align: left;
  z-index: 99;
  /* border: 1px solid #11578d; */
  /* border: 1px solid #0c1519; */
  /* cursor: pointer; */
  user-select: none;
  display: flex;
  align-items: center;
  transition: transform 0.3s ease-in-out;
  margin-top: 0.08rem;
  box-shadow: inset 0 0 16px rgba(246, 242, 242, 0.3);
}

/* 有标题时候的下面内容样式 */
.every_content_main_y {
  width: 100%;
  height: calc(100% - 0.36rem);
  margin-top: 0.36rem;
  background-image: linear-gradient(to bottom,
      rgba(12, 21, 25, 0.5),
      rgba(12, 21, 25, 0.4),
      rgba(12, 21, 25, 0.3),
      rgba(12, 21, 25, 0.3));
  /* border: 1px solid #fff; */
}

/* 没有标题时候的下面内容样式 */
.every_content_main_n {
  width: 100%;
  height: 100%;
  /* border: 1px solid #181e36; */
}

.mActive {
  color: red;
}

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 10px;
  background-color: transparent !important;
  /* 滚动条宽度 */
}

/* 设置滚动条轨道的样式 */
::-webkit-scrollbar-track {
  background: transparent !important;
  /* background-color: #12181a !important; */
  /* background-color: rgba(12, 21, 25, .63) !important;
    opacity: .63 !important; */
  /* 滚动条轨道背景色 */
}

/* 设置滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5);
  /* 滚动条滑块颜色 */
  /* border-radius: 6px; */
  /* 滑块圆角 */
}

/* 设置鼠标悬停在滚动条上时的样式 */
::-webkit-scrollbar-thumb:hover {
  background: #777;
  /* 滚动条滑块悬停时的颜色 */
}

.roundline {
  height: 0.3rem;
  width: 100%;
  padding-left: 0.05rem !important;
  padding-top: 0.05rem !important;
  line-height: 0.3rem;
  color: #fff;
  /* border:1px solid red; */
  box-sizing: border-box;
}

.momentData {
  /* border: 1px solid red; */
  margin-top: 1rem;
  width: 100%;
  height: calc(100% - 1rem);
}

/* 左下角的设备已尽进度图 */
.left_bottom {
  width: 98%;
  height: 100%;
  margin: 0 auto;
  /* margin-top: .98rem; */

  /* border: 1px solid rgb(165, 226, 21); */
}

.left_bottom_info {
  width: 100%;
  height: 50%;
  position: relative !important;
  border: 1px solid transparent;
}

.device_data {
  width: 100%;
  height: calc(100% - 0.98rem);
  margin-top: 0.98rem;
  /* border: 1px solid red; */
}

.device_data>div {
  width: 100%;
  height: 50%;
  /* border: 1px solid yellow; */
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.d_info {
  height: 80%;
  width: 30%;
  /* border: 1px solid black; */
  border-radius: 0.4rem 0.4rem 0.2rem 0.2rem;
  background: linear-gradient(to top,
      rgb(28, 70, 88, 1),
      rgb(28, 70, 88, 0.6),
      rgba(255, 255, 255, 0) 70%);
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
}

.d_info>div:nth-child(1) {
  width: 100%;
  height: 36%;
  /* border: 1px solid black; */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
}

.d_info>div:nth-child(2) {
  width: 100%;
  height: 50%;
  /* border: 1px solid black; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.d_bottom_info {
  background: linear-gradient(to top,
      rgb(11, 29, 72, 1),
      rgb(11, 29, 72, 0.6),
      rgba(255, 255, 255, 0) 70%);
}

.schedule_data {
  width: 100%;
  height: calc(100% - 0.98rem);
  margin-top: 0.98rem;
  /* border: 1px solid red; */
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

.plan_info {
  height: 49%;
  width: 100%;
  /* border: 1px solid red; */
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

.plan_name {
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 12%;
  /* border: 1px solid red; */
}

.plan_data {
  height: 100%;
  width: 88%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* border: 1px solid red; */
}

.prog {
  width: 100%;
  height: 26%;
  /* border: 1px solid green; */
  text-align: left;
  display: flex;
  align-items: center;
  font-size: 0.4rem;
}

.prog_title {
  width: 16%;
  height: 100%;
  /* border: 1px solid blue; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.prog_content {
  width: 70%;
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-around;
  /* border: 1px solid white; */
}

.schedule_value {
  height: 40%;
  width: 13%;
  padding-left: 0.06rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* border: 1px solid red; */
}

/* 没值的背景颜色 */
.back0>>>.el-progress-bar__outer {
  background-color: #fff !important;
}

/* 有值之后的背景颜色 */
.back>>>.el-progress-bar__outer {
  /* background-color: rgb(140 88 88) !important; */
  background-color: rgb(48 71 113) !important;
}

.right_bottom {
  width: 98%;
  height: 98%;
  /* border: 1px solid red; */
  margin: 0 auto;
}

.right_bottom_top {
  width: 100%;
  height: 46%;
  /* border: 1px solid rgb(153, 126, 126); */
}

.partitionData {
  width: 100%;

  margin-top: 0.98rem !important;
  height: calc(100% - 0.98rem);
  border: 1px solid #072362;
}

.real_data {
  width: 100%;
  height: calc(100% - 1.1rem);
  margin-top: 0.98rem;
  /* border: 1px solid red; */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* 每行最多显示 5 个 */
  gap: 5px 10px;
  overflow: hidden;
  padding: 0 0.4rem;
}

.real_info {
  height: 90% !important;

  /* border: 1px solid rgb(180, 168, 168); */
  background-color: #1d449c;
  border-radius: 0.2rem;
}

.real_info>div:nth-child(1) {
  height: 50%;
  width: 100%;
  font-size: 0.4rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #198ef0;
}

.real_info>div:nth-child(2) {
  height: 50%;
  width: 100%;
  font-size: 0.42rem;
  display: flex;
  justify-content: space-around;
  align-items: start;
  color: #198ef0;
}

.right_bottom_bottom {
  width: 100%;
  height: 50%;
  /* border: 1px solid rgb(153, 126, 126); */
  /* margin-top: - .98rem !important; */
}
</style>
